m

Typography

-apple-system, BlinkMacSystemFont, sans-serif

Typographic Scale

9
Aa The quick brown fox jumps over the lazy dog

px

8
Aa The quick brown fox jumps over the lazy dog

px

7
Aa The quick brown fox jumps over the lazy dog

px

6
Aa The quick brown fox jumps over the lazy dog

px

5
Aa The quick brown fox jumps over the lazy dog

px

4
Aa The quick brown fox jumps over the lazy dog

px

3
Aa The quick brown fox jumps over the lazy dog

px

2
Aa The quick brown fox jumps over the lazy dog

px

1
Aa The quick brown fox jumps over the lazy dog

px

0
Aa The quick brown fox jumps over the lazy dog

px

Colors

Skullcat


<Skullcat w='128px' />

Header


Trying to make the web: fast, readable, and easy to navigate.

Trying to make the web: fast, readable, and easy to navigate.

Trying to make the web: fast, readable, and easy to navigate.

Trying to make the web: fast, readable, and easy to navigate.

<Header px={3}><h1>Trying to make the web: fast, readable, and easy to navigate.</h1></Header>

Card


<Card 
w={1}
href="http://tachyons.io"
title="A sample card title"
text="Duis vel hendrerit dolor, quis pharetra orci. Proin eu faucibus eros, in imperdiet lacus. Vivamus neque ipsum, eleifend at tortor quis, venenatis hendrerit ante. Aliquam dolor diam, venenatis scelerisque lacus vel, egestas pharetra quam."
image="https://mrmrs.github.io/photos/u/004.jpg"
/>

Footer


Made with
<Footer />

LogoLab


<LogoLab />

Img


<Img mb={3} src="http://mrmrs.github.io/photos/011.jpg" />

NavLink


<NavLink>Home</NavLink>

H1


Trying to make the web: fast, readable, and easy to navigate.

<H1 fontSize={7}>Trying to make the web: fast, readable, and easy to navigate.</H1>

H2


THE VEIL OF IGNORANCE

Design Systems

Developing UI

<H2>THE VEIL OF IGNORANCE</H2>

H3


UI development as a first-class citizen

What is a component?

<H3>UI development as a first-class citizen</H3>

H4


What is a component?

<H4>What is a component?</H4>

P


Everything is a component. A link is a component. A text input with a label is a component. A modal is a component. A page is a component. Components can be composed of other components.

The single hardest part of front-end development at any scale is making changes to code and understanding all of the resulting visual and behavioral effects that will occur across the application.

<P fontSize={4}>Everything is a component. A link is a component. A text input with a label is a component. A modal is a component. A page is a component. Components can be composed of other components.</P>

Flexbox


Hello
<Flexbox>Hello</Flexbox>

Div


Hello
<Div>Hello</Div>

Link


<Link>Hello</Link>

TextLink


<TextLink>Hello</TextLink>

AspectRatio


Hello
<AspectRatio>Hello</AspectRatio>

AspectRatioObject


Container


Hello
<Container>Hello</Container>

Nav


<Nav>Hello</Nav>

Ul


    Hello
<Ul>Hello</Ul>

ListItem


  • Hello
  • <ListItem>Hello</ListItem>

    LinkListItem


    <LinkListItem py={3} text="Hello" />

    Span


    Hello
    <Span>Hello</Span>

    Svg


    <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path fill="currentColor" d="M16 7 C13 7 2 9 2 16 C2 23 6 23 10 24 L11 28 L12 26 L20 26 L21 28 L22 24 C26 23 30 23 30 16 C30 9 19 7 16 7 M4 18 A4 4 0 0 1 12 18 A4 4 0 0 1 4 18 M20 18 A4 4 0 0 1 28 18 A4 4 0 0 1 20 18 "/>
    </Svg>